<template>
	<d2-container>
		<template slot="header">
			<el-form class="header-area" ref="indexForm" :model="indexForm" label-width="90px" style="height: auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="用户名" prop="userName"><el-input type="text" v-model="indexForm.userName" placeholder="用户名"></el-input></el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="真实姓名" prop="realName"><el-input type="text" v-model="indexForm.realName" placeholder="真实姓名"></el-input></el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="昵称" prop="nickName"><el-input type="text" v-model="indexForm.nickName" placeholder="昵称"></el-input></el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="手机号" prop="phone"><el-input type="text" v-model="indexForm.phone" placeholder="手机号"></el-input></el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="状态" prop="status">
							<el-select v-model="indexForm.status" placeholder="请选择状态" style="width: 100%;">
                			    <el-option label="全部" value=""></el-option>
                			    <el-option label="正常" value="0"></el-option>
								<el-option label="冻结" value="1"></el-option>
                			</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="5">
						<el-form-item label="推广邀请码" prop="invitationCode">
							<el-input type="text" v-model="indexForm.invitationCode" placeholder="会员邀请码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="推荐人账号" prop="referrerUserName">
							<el-input type="text" v-model="indexForm.referrerUserName" placeholder="推荐人账号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="注册时间" prop="time">
							<el-date-picker
								v-model="time"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								align="right"
								:default-time="['00:00:00', '23:59:59']"
								style="width: 100%"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('indexForm')">查询</el-button>
							<el-button type="primary" plain size="medium" @click="resetForm('indexForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<template>
			<el-table stripe border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
				<!-- <el-table-column type="selection" width="65"></el-table-column> -->
				<el-table-column type="index" fixed label="序号" width="60" align="center"></el-table-column>
				
				<el-table-column prop="headImg" label="头像" width="110" align="center">
				    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" v-if="scope.row.headImg != ''" :src="scope.row.headImg"></el-image>
                    </template>
				</el-table-column>
				
				<el-table-column prop="userName" label="用户名" width="160"></el-table-column>
				<el-table-column prop="nickName" label="昵称" width="160"></el-table-column>
				<el-table-column prop="realName" label="真实姓名" width="120"></el-table-column>
				<el-table-column prop="phone" label="手机号" width="140"></el-table-column>
				<el-table-column prop="invitationCode" label="推广邀请码" width="120"></el-table-column>
				
				<el-table-column prop="status" label="状态" width="100" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 0">正常</el-tag>
						<el-tag v-if="scope.row.status == 1">冻结</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="referrerUserName" label="推荐人账号" width="140"></el-table-column>
				<!-- <el-table-column prop="accountWx" label="微信账号" width="120"></el-table-column>
				<el-table-column prop="wxNickName" label="微信昵称" width="120"></el-table-column> -->
				<el-table-column prop="registerTerminal" label="注册终端" width="120" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.registerTerminal == 1">pc</el-tag>
						<el-tag v-if="scope.row.registerTerminal == 2">h5</el-tag>
						<el-tag v-if="scope.row.registerTerminal == 3">小程序</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="注册时间" width="160" :formatter="forDateCreateTime"></el-table-column>
				<el-table-column fixed="right" label="操作" width="230">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="detail(scope.row.id)">详情</el-button>
						<el-button type="primary" size="small" @click="couponAccount(scope.row)">券账户</el-button>
						<el-button v-if="scope.row.status==0" plain type="warning" size="small" @click="operateUserStatus(scope.row, 1)">冻结</el-button>
						<el-button v-if="scope.row.status==1" plain type="warning" size="small" @click="operateUserStatus(scope.row, 0)">激活</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
		<template>
			<div>
				<keep-alive>
					<detailPage
						:detailPage="detailComponent"
						@on-detailPage-change="onDetailPageChange"
						@on-loadlist-change="fetchData"
						:dUserId="userId"
						@on-id-change="onIdChange"
					></detailPage>
				</keep-alive>
			</div>
		</template>
	</d2-container>
</template>
<script>
import { findUserListByPage, operateUserStatus } from '@api/martUser/user'
import detailPage from './detail'
import dayjs from 'dayjs'
export default {
  name: 'martUser-index',
  components: {
    detailPage
  },
  data () {
    return {
      indexForm: {
        userName: '',
        phone: '',
        nickName: '',
        realName: '',
        status: '',
        invitationCode: '',
        referrerUserName: '',
        startTime: '',
        endTime: ''
      },
      time: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      detailComponent: false,
      userId: ''
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.loading = true
      this.indexForm.startTime = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss')
      this.indexForm.endTime = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss')
      findUserListByPage({
        userName: this.indexForm.userName,
        phone: this.indexForm.phone,
        nickName: this.indexForm.nickName,
        realName: this.indexForm.realName,
        status: this.indexForm.status,
        invitationCode: this.indexForm.invitationCode,
        referrerUserName: this.indexForm.referrerUserName,
        startTime: this.indexForm.startTime,
        endTime: this.indexForm.endTime,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
        .then(res => {
          this.tableData = res.data.content
          this.total = res.data.total
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchData()
    },
    forDateCreateTime (row, column) {
      return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    resetPage () {
      this.currentPage = 1
	  this.pageSize = 10
	  this.total = 0
    },
    submitForm (formName) {
      this.resetPage()
      this.fetchData()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
	  this.time = []
      this.resetPage()
      this.fetchData()
    },
    detail (id) {
      this.detailChange()
      this.idChange(id)
    },
    /** 双向绑定 start */
    detailChange () {
      this.detailComponent = !this.detailComponent
    },
    onDetailPageChange (val) {
      this.detailComponent = val // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    idChange (val) {
      this.userId = val
    },
    onIdChange (val) {
      this.userId = val // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    /** 双向绑定 end */
    // 操作用户状态
    operateUserStatus (row, status) {
      this.$confirm('确认' + (status == 0 ? '激活' : '冻结') + ('【' + row.userName + '】？')).then(_ => {
        this.loading = true
        operateUserStatus({
          id: row.id,
          status: status
        }).then(res => {
          if (res.code == '000000') {
            this.$message({ message: res.message, type: 'success' })
			  this.fetchData()
            this.loading = false
          } else {
            this.$message({ message: res.message, type: 'error' })
          }
        }).catch(err => {
          console.log('err', err)
          this.loading = false
        })
      })
    },
    // 券账户
    couponAccount (row) {
      sessionStorage.setItem('userId', row.id)
      sessionStorage.setItem('userName', row.userName)
	  sessionStorage.setItem('phone', row.phone)
	  sessionStorage.setItem('nickName', row.nickName)
      sessionStorage.setItem('realName', row.realName)
      this.$router.push({
        path: '/martUser/couponAccountFlow',
        name: 'couponAccountFlow'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.header-area {
		.el-row {
			.el-col {
				.el-form-item {
					margin-bottom: 20px;
				}
			}
			&:last-child {
				.el-col {
					.el-form-item {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>
